<template>
  <BaseCard
      title="资产情况"
      height="3rem"
      :contentStyle="{ paddingTop: '0rem' }"
  >
    <template #right>
      <span style="color: #8D96A2">单位：亿元</span>
    </template>
    <div class="asset-overview">
      <CommonPieChart
          ref="baseChartsRef1"
          :pieData="pieData1"
          :cardData="{ title: '逻辑实体', value: '492' }"
          :autoRander="autoRander"
          :autoNumber="autoNumber"
          :height="pieHeight"
      />
      <CommonPieChart
          ref="baseChartsRef2"
          :pieData="pieData2"
          :cardData="{ title: '数据表', value: '134,432' }"
          :autoRander="autoRander"
          :autoNumber="autoNumber"
          :height="pieHeight"
      />
      <CommonPieChart
          ref="baseChartsRef3"
          :pieData="pieData3"
          :cardData="{ title: '资产容量', value: '492TB' }"
          :autoRander="autoRander"
          :autoNumber="autoNumber"
          :height="pieHeight"
      />
    </div>
  </BaseCard>
</template>

<script setup>
import {ref} from "vue";
import BaseCard from "@/components/vpt-cards-1001";
import CommonPieChart from "./commonPieChart.vue";
import {addThousandsSeparator} from "@/utils/formatter.js";

const autoRander = ref(false);
const autoNumber = ref(60);
const pieHeight = ref("1.9rem");

const pieData1 = [
  {name: "分类一", value: 42, percentage: "65.4%"},
  {name: "分类二", value: 21, percentage: "28.9%"},
  {name: "分类三", value: 2, percentage: "4.6%"},
];

const pieData2 = [
  {name: "分类一", value: 42, percentage: "65.4%"},
  {name: "分类二", value: 21, percentage: "28.9%"},
  {name: "分类三", value: 2, percentage: "4.6%"},
  {name: "分类四", value: 2, percentage: "4.6%"},
  {name: "分类五", value: 2, percentage: "4.6%"},
  {name: "分类六", value: 2, percentage: "4.6%"},
];

const pieData3 = [
  {name: "分类一", value: 42, percentage: "65.4%"},
  {name: "分类二", value: 21, percentage: "28.9%"},
  {name: "分类三", value: 2, percentage: "4.6%"},
];
</script>

<style scoped>
.asset-overview {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
</style>